<template>
  <div class="home">
    生命周期的讲解
    {{number}}
  </div>
</template>

<script>
// @ is an alias to /src
import { onMounted, watchEffect, ref, computed } from 'vue';
// import { mapState } from 'vuex';
import { useStore } from 'vuex';
export default {
  name: 'HomeView',
  components: {

  },
  // created() {
    
  // },
  // mounted() {
    
  // },
  // computed:{
  //   ...mapState(['number'])
  // },
  // vuex 的辅助函数，还有完全迁移，在组合api 里面是不能使用 辅助函数的。
  setup(props) {
    const store = useStore();
    // console.log(store);
    const num = ref(0);
    const number = ref(computed(() => store.state.number))
    setTimeout(() => {
      num.value = 200;
    }, 2000);
    let dom = document.querySelector('.home');
    // console.log(dom);
    onMounted(() => { // vue3 onMounted 的生命周期
      let dom = document.querySelector('.home');
      console.log(dom);
    })

    watchEffect(() => { // 开始的时候会默认执行一次 
      // watchEffect 监听数据变化的时候，不要传入具体的监听数据
       console.log(num.value);

    })
    return {
      number
    }
  },
  // 在vue2 中所有的生命周期，都是兄弟关系
}
</script>
